<template>
	<!-- <div>
		我是商品页面
		<HelloWorld title="提示" sureText="查看购物车" btnType="1" modalType="middle" v-bind:showModal="showModal"
			v-on:submit="goToCart" v-on:cancel="showModal = false">
			<template v-slot:body>
				<p>商品添加成功！</p>
			</template>
		</HelloWorld>
	</div>

	<h3>Tooltips with Vue 3 Teleport</h3>
	<div class="modal1">
		<ShowModal />
	</div>-->

	<div class="modal2">
		<button id="show-modal" @click="Show = true">Show Modal</button>
		<Teleport to="body">
			<!-- 使用这个 modal 组件，传入 prop -->
			<ShowModalView :show="Show" @cancel="Show = false" @confirm="Show=false">
				<template #header>
					<h3>custom header</h3>
				</template>
			</ShowModalView>
		</Teleport>
	</div>

	<!-- 	<div class="modal3">
		<MyModal></MyModal>
	</div> -->


	<div class="mondayModal">
		<h4>{{txt}}</h4>
		<h3 @click='isShow = true'>点击打开dialog</h3>
		<ShowModalVue v-if='isShow' :show='isShow' @change='changeShow' />
	</div>
</template>

<script>
	import HelloWorld from './components/HelloWorld.vue'
	import ShowModal from "./components/ShowModal.vue";
	import ShowModalView from "./components/ShowModalView.vue";
	import MyModal from "./components/MyModal.vue";
	import ShowModalVue from './components/ShowModalVue.vue'

	export default {
		name: "App",
		components: {
			HelloWorld,
			ShowModal,
			ShowModalView,
			MyModal,
			ShowModalVue
		},
		data() {
			return {
				Show: false,
				showModal: true
			};
		},
		methods: {
			goToCart() {
				console.log("去购物车");
			},
		},
	};
</script>

<style>
</style>
